<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />

    <title>新闻中心</title>
    {include file='commonjs'}
</head>

<body class="page product">

    <!-- c-nav 开始 -->
    {include file='common_head'}
    <!-- c-nav 结束 -->

    <!-- c-banner 开始 -->
    <div class="c-banner">
        <div class="banner">
            <img class="banner-pic" src="/static/index/img/page/news/news_banner.png" alt="">
        </div>
        <div class="series">
            <ul class="series-list clearfix">
                <li class="series-list-link oStyle act">
                    <a class="aLink" href="javascript:">公司新闻</a>
                </li>
                <li class="series-list-link oStyle">
                    <a href="javascript:">行业新闻</a>
                </li>
                <li class="series-list-link oStyle">
                    <a href="javascript:">净水器知识</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- c-banner 结束 -->

    <!-- index_main 开始 -->
    <div class="news_main PT-55">
        <ul class="newsList clearfix" id="newslist">
            <!--<li class="newsList-item">
                <div class="newsList-item-pic">
                    <a href="javascript:">
                        <img src="img/page/news/news_pic1.png">
                    </a>
                </div>
                <p class="newsList-item-title">
                    <a href="javascript:">
                        净水龙头和普通龙头有什么不一样水龙头净水器
                    </a>
                </p>
                <P class="newsList-item-text">
                    <a href="javascript:">
                        作为净水龙头设备来讲,其作用就是精华水质,而在净水龙
                        头市场普及之前,我们应该都听过一个产品:普通龙头。使
                        用普通龙头的时候,我们的水资源还没有...
                    </a>

                </P>
            </li>-->
        </ul>
        <div class="page_box">
            <div id="pagination1" class="page fl iPage"></div>
            <!--<ul class="i_pages clearfix" id="pageTool">
                <li class="pages-up">
                    <a href="javascript:" style="background-image: url('img/common/up.png')"></a>
                </li>
                <li class="pages_item">
                    <a class="pagesActive" href="javascript:">1</a>
                </li>
                <li class="pages_item">
                    <a href="javascript:">2</a>
                </li>
                <li class="pages_item">
                    <a href="javascript:">3</a>
                </li>
                <li class="pages_item">
                    <a href="javascript:">4</a>
                </li>
                <li class="pages_item">
                    <a href="javascript:">5</a>
                </li>
                <li class="pages_item">
                    <a href="javascript:">6</a>
                </li>
                <li class="pages-next">
                    <a href="javascript:" style="background-image: url('img/common/next.png')"></a>
                </li>
            </ul>-->
        </div>
    </div>
    <!-- index_main 结束 -->

    <!-- c-footer 开始 -->
    {include file='common_footer'}
    <!-- c-footer 结束 -->

     <!--  新闻 -->
    <script type="text/x-handlebars-template" id="newsTemp">
        <% _.each(data, function(item) { %>
        <li class="newsList-item">
            <div class="newsList-item-pic">
                <a href="<%= item.href %>">
                    <img class="lazy" data-original="<%= item.pic %>">
                </a>
            </div>
            <p class="newsList-item-title">
                <a href="<%= item.href %>">
                    <%= item.title %>
                </a>
            </p>
            <P class="newsList-item-text">
                <a href="<%= item.href %>">
                    <%= item.text %>
                </a>

            </P>
        </li>
        <% }) %>
    </script>

    <script>
        require(['jquery', 'SMV', 'layer', 'lodash', 'lazyload', 'jqPage'], function($, SMV, layer, _, lazyload, jqPage) {
            var obj = {};
            // 类
            var sele = $(".oStyle");
            for (var i = 0; i < sele.length; i++) {
                sele.eq(i).attr("data-id", i);
            }
            obj.style = parseInt($(".act").attr("data-id"));
            sele.click(function () {
                $(this).addClass("act").siblings().removeClass("act");
                $(this).children().addClass("aLink");
                $(this).siblings().children().removeClass("aLink");
                obj.style = parseInt($(".act").attr("data-id"));
                $.post("",obj);
            });

            var newsTemp = _.template($("#newsTemp").html());
            $.get("http://www.easy-mock.com/mock/59ca0a81e0dc663341bb5fc2/appliance/news" ,function (res) {
                $("#newslist").html(newsTemp({data: res.data}));
                $("#pagination1").pagination({
                    currentPage: 1, // 当前页
                    isShow: false, // 首尾显示
                    totalPage: res.pages, // 总页数
                    prevPageText: "上一页",// 上一页文本
                    nextPageText: "下一页",// 下一页文本
                    callback: function(current) {
                        $.get("http://www.easy-mock.com/mock/59ca0a81e0dc663341bb5fc2/appliance/news",function (res) {

                            $("#newslist").html(newsTemp({data: res.data}));
                            $("img.lazy").lazyload({
                                effect : "fadeIn"
                            });
                        });
                        obj.p = current;
                        console.log(obj);
                    }
                });

                $("img.lazy").lazyload({
                    effect : "fadeIn"
                });
            });

            // nav
            $(window).scroll( function() {
                var t = $(document).scrollTop();
                if (t > 0) {
                    $(".c-nav").addClass("c_nav-scroll");
                }else {
                    $(".c-nav").removeClass("c_nav-scroll");
                }
            });

            // 留言
            new SMV('form', {
                rules: {
                    onlyPhone:[/^1[34578]\d{9}$/,"手机号码格式有误"]
                },
                fields: {
                    name: {
                        required: "姓名未填写",
                        failHtml: false,
                        rule: "required|disblur",
                        fail: function (messages) {
                            layer.tips(messages, '#name');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    },
                    phone: {
                        required: "号码未填写",
                        failHtml: false,
                        rule: "required|disblur|onlyPhone",
                        fail: function (messages) {
                            layer.tips(messages, '#phone');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    },
                    corp: {
                        required: "公司未填写",
                        failHtml: false,
                        rule: "required|disblur",
                        fail: function (messages) {
                            layer.tips(messages, '#corp');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    },
                    idea: {
                        required: "意见未填写",
                        failHtml: false,
                        rule: "required|disblur",
                        fail: function (messages) {
                            layer.tips(messages, '#idea');
                        },
                        failStyle: {
                            border: "1px solid red"
                        }
                    }
                },
                short: true,
                submit: function(valid, form) {
                    if(valid) {
                        form.submit();
                    }
                }
            })
        })
    </script>
</body>

</html>